<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>light-box.t</title>
  <!-- <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="/assets/css/example.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

<h1>group-1</h1>
<div>
  <img class="lightbox" data-role="lightbox" data-source="img/1-1.jpg" data-group="group-1" data-id="group-1-img-1" data-caption="group-1-img-1" src="img/1-1.jpg" style="width:100px;height: 100px;">
  <img class="lightbox" data-role="lightbox" data-source="img/1-2.jpg" data-group="group-1" data-id="group-1-img-2" data-caption="group-1-img-2" src="img/1-2.jpg" style="width:100px;height: 100px;">
  <img class="lightbox" data-role="lightbox" data-source="img/1-3.jpg" data-group="group-1" data-id="group-1-img-3" data-caption="group-1-img-3" src="img/1-3.jpg" style="width:100px;height: 100px;">
</div>

<h1>group-2</h1>
<div>
  <img class="lightbox" data-role="lightbox" data-source="img/3-5.jpg" data-group="group-2" data-id="group-2-img-1" data-caption="group-2-img-1" src="img/3-5.jpg" style="width:100px;height: 100px;">
</div>
  <!-- <div id="lightbox-mask"></div>
  <div id="lightbox-popup">
    <div class="lightbox-pic-view">
      <span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>
      <img src="img/2-2.jpg" class="lightbox-img" alt="">
      <span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>
    </div>
    <div class="lightbox-pic-caption">
      <div class="lightbox-caption-area">
        <p class="lightbox-pic-desc">title</p>
        <span class="lightbox-of-index">1/1</span>
      </div>
      <span class="lightbox-close-btn"></span>
    </div>
  </div> -->
  <script data-main="js/app" src="/assets/lib/require/require.min.js"></script>
</body>

</html>
